<template>
    <div>
      <div class="cinema-header">
        <div class="header">
          <div class="header-back" @click="cinemaBack"><span style="font-size:13px;" class="iconfont icon-changyongicon-1"></span>返回</div>
          <div class="header-search"><input type="text" v-model= "searchcinema" placeholder="搜索影院"></div>
          <div class="header-city" @click="toCity">{{localCity}}<span style="font-size:13px;" class="iconfont icon-xia1"></span></div>
        </div>
      </div>
        <div class="maincinema" :style="mystyle">
            <ul class="cinema">
                <li v-for="data in computedcinemalist" :key="data.cinemaId">
                    <div>
                        <p>{{data.name}}</p>
                        <p>{{data.address}}</p>
                    </div>
                    <div>
                        <p>￥{{data.lowPrice/100}}起</p>
                        <p>距离未知</p>
                    </div>
                </li>
            </ul>
        </div>
        <!-- <div v-for="item in computedcitylist" :key="item.cinemaId">{{item.name}}</div> -->
    </div>
</template>
<script>
import Vue from 'vue'
import { Header } from 'mint-ui'
import axios from 'axios'
import BetterScroll from 'better-scroll'
Vue.component(Header.name, Header)
export default {
  data () {
    return {
      cinemalist: [],
      searchcinema: '',
      mystyle: {
        height: '0px'
      },
      localCity: ''
    }
  },
  mounted () {
    this.localCity = localStorage.getItem('cityName') ? localStorage.getItem('cityName') : '未知城市'
    // 当浏览器被清空，cityId不存在时，拦截自动跳到city路由，重新选择城市
    var id = localStorage.getItem('cityId')
    // console.log(id)
    if (id == null) {
      this.$router.push('/city')
      return false
    }
    //   console.log(document.documentElement.clientHeight)
    this.mystyle.height = document.documentElement.clientHeight - 50 + 'px'

    axios({
      url: `https://m.maizuo.com/gateway?cityId=${id}&ticketFlag=1&k=1241158`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16239969753025057135722497","bc":"110100"}',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
      this.cinemalist = res.data.data.cinemas
      // console.log(this.cinemalist)
      /*
      this.$nextTick 方法是当异步请求数据插入到dom节点完后执行该方法
      */
      this.$nextTick(() => {
        /*
          第二个参数为设置batter-scroll相关参数，scrollbar为调出滚动条
          */
        var bs = new BetterScroll('.maincinema', {
          scrollbar: {
            fade: true,
            interactive: false
          }
        })
        console.log(bs)
      })
    })
  },
  methods: {
    cinemaBack () {
      this.$router.go(-1)
    },
    toCity () {
      this.$router.push('/city')
    }
  },
  computed: {
    computedcinemalist () {
      return this.cinemalist.filter(item => item.name.indexOf(this.searchcinema) > -1)
    }
  }
}
</script>
<style lang="scss" scoped>
.cinema-header {
  width: 100%;
  background-color: #26a2ff;
  color:white;
  font-size:14px;
  .header {
  margin:0px 10px;
  height: 36px;
  .header-back {
    height: 36px;
    line-height: 36px;
    width:20%;
    float:left;
  }
  .header-search {
    margin-top:6px;
    width:60%;
    height: 20px;
    line-height: 20px;
    float:left;
    text-align: center;
    background-color: #26a2ff;
    input:nth-child(1) {
      width:80%;
      background-color: #fff;
      text-align: center;
      color:#26a2ff;
      border-color: #fff;
      border-radius: 10px;
    }
  }
  .header-city {
    width:20%;
    height: 36px;
    line-height: 36px;
    float:right;
    text-align: right;
  }
  }
}
.maincinema{
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  .cinema {
    padding:0px 10px 38px 10px;
    list-style: none;
    li {
      display: block;
      border-bottom:1px solid #ccc;
      height:60px;
      div:nth-child(1) {
        width:80%;
        height:60px;
        float:left;
        text-align: left;
        line-height: 60px;
        p:nth-child(1) {
          height:30px;
          line-height: 30px;
          font-size: 15px;
          color: #191a1b;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p:nth-child(2) {
          height:30px;
          line-height: 30px;
          color: #797d82;
          font-size: 12px;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      div:nth-child(2) {
        width:20%;
        height:60px;
        float:right;
        text-align: center;
        line-height: 60px;
        p:nth-child(1) {
          height:30px;
          line-height: 30px;
          font-size: 15px;
          color: #ff5f16;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p:nth-child(2) {
          height:30px;
          line-height: 30px;
          color: #797d82;
          font-size: 12px;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
// .cinema{
//     list-style: none;
//     li {
//         margin-top:10px;
//     }
// }
</style>
